<!-- @format -->

<script setup>

import {computed} from "vue";

const emits = defineEmits(["click"])
const props = defineProps({
    index: {
        type: [Number, String],
        default: () => "",
    },
    menu: {
        type: Object,
        default: () => {
            return {
                childrens: []
            };
        },
    },
});
const list = computed(() => props.menu.childrens);

// 点击菜单
function menuClick(menu) {
    emits("click", menu)
}
</script>

<template>
    <el-sub-menu :index="`${menu.id}`">
        <template #title>
            <b-icon v-if="menu.icon" :name="menu.icon" size="16" style="padding-left: 4px;padding-right: 10px;"/>
            <span>{{ menu.name }}</span>
        </template>
        <template
                v-for="item in list"
                :key="item.id">
            <template v-if="item.isShow">
                <template v-if="item.childrens && item.childrens.length > 0">
                    <SubMenu :menu="item" @click="menuClick"/>
                </template>
                <template v-else>
                    <el-menu-item :index="`${item.id}`" @click="menuClick(item)">
                        <b-icon v-if="item.icon" :name="item.icon" size="16" style="padding-left: 4px;padding-right: 10px;"/>
                        <div v-else style="display: inline-flex;width: 10px"></div>
                        <template #title>{{ item.name }}</template>
                    </el-menu-item>
                </template>
            </template>
        </template>
    </el-sub-menu>
</template>
